import { Box, Flex, Icon } from '@chakra-ui/react';

import { memo, useCallback, useState } from 'react';

import { FaImages } from 'react-icons/fa';

import { useBoardName } from '../../hooks/useBoardName';

import BoardContextMenu from '../BoardContextMenu';

import SelectionOverlay from '@/common/components/SelectionOverlay';

import { boardIdSelected } from '@/features/Gallery/store/gallerySlice';
import { useAppDispatch } from '@/store/hooks';
interface Props {
  isSelected: boolean;
}

const NoBoardBoard = memo(({ isSelected }: Props) => {
  const dispatch = useAppDispatch();
  const boardName = useBoardName('none');
  const handleSelectBoard = useCallback(() => {
    dispatch(boardIdSelected('none'));
  }, [dispatch]);
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseOver = useCallback(() => {
    setIsHovered(true);
  }, []);

  const handleMouseOut = useCallback(() => {
    setIsHovered(false);
  }, []);

  return (
    <Box sx={{ w: 'full', h: 'full', touchAction: 'none', userSelect: 'none' }}>
      <Flex
        onMouseOver={handleMouseOver}
        onMouseOut={handleMouseOut}
        sx={{
          position: 'relative',
          justifyContent: 'center',
          alignItems: 'center',
          aspectRatio: '1/1',
          borderRadius: 'base',
          w: 'full',
          h: 'full',
        }}
      >
        <BoardContextMenu board_id="none">
          {(ref) => (
            <Flex
              ref={ref}
              onClick={handleSelectBoard}
              sx={{
                w: 'full',
                h: 'full',
                position: 'relative',
                justifyContent: 'center',
                alignItems: 'center',
                borderRadius: 'base',
                cursor: 'pointer',
                bg: 'base.900',
                _dark: {
                  bg: 'base.800',
                },
              }}
            >
              <Flex
                sx={{
                  w: 'full',
                  h: 'full',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
              >
                <Icon
                  boxSize={12}
                  as={FaImages}
                  sx={{
                    mt: -6,
                    opacity: 0.7,
                    color: 'base.500',
                    _dark: {
                      color: 'base.500',
                    },
                  }}
                />
                {/* <Image
                  src={InvokeAILogoImage}
                  alt="invoke-ai-logo"
                  sx={{
                    opacity: 0.4,
                    filter: 'grayscale(1)',
                    mt: -6,
                    w: 16,
                    h: 16,
                    minW: 16,
                    minH: 16,
                    userSelect: 'none',
                  }}
                /> */}
              </Flex>
              {/* <Flex
                sx={{
                  position: 'absolute',
                  insetInlineEnd: 0,
                  top: 0,
                  p: 1,
                }}
              >
                <Badge variant="solid" sx={BASE_BADGE_STYLES}>
                  {totalImages}/{totalAssets}
                </Badge>
              </Flex> */}
              {/* {!autoAddBoardId && <AutoAddIcon />} */}
              <Flex
                sx={{
                  position: 'absolute',
                  bottom: 0,
                  left: 0,
                  p: 1,
                  justifyContent: 'center',
                  alignItems: 'center',
                  w: 'full',
                  maxW: 'full',
                  borderBottomRadius: 'base',
                  bg: isSelected ? 'accent.500' : 'base.800',
                  color: isSelected ? 'base.50' : 'base.100',
                  _dark: {
                    bg: isSelected ? 'accent.600' : 'base.700',
                    color: isSelected ? 'base.50' : 'base.100',
                  },
                  lineHeight: 'short',
                  fontSize: 'xs',
                  fontWeight: isSelected ? 700 : 500,
                }}
              >
                {boardName}
              </Flex>
              <SelectionOverlay isSelected={isSelected} isHovered={isHovered} />
            </Flex>
          )}
        </BoardContextMenu>
      </Flex>
    </Box>
  );
});

NoBoardBoard.displayName = 'HoverableBoard';

export default NoBoardBoard;
